<template>
  <div>
    <el-drawer :model-value="visible" title="项目信息" size="500px" @close="closeHandle" @closed="closed">
      <div class="demo-drawer__content">
        <el-form :model="form" ref="formRef" label-position="right">
          <el-form-item :label-width="formLabelWidth" label="账户名称" required>
            <el-input v-model="form.name" placeholder="请输入" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="备注" prop="zhanghu_content" :label-width="formLabelWidth">
            <el-input placeholder="请输入备注" v-model="form.zhanghu_content" show-word-limit rows="4"
                      type="textarea" autocomplete="off"/>
          </el-form-item>
          <el-form-item label="上传图片" :label-width="formLabelWidth">
            <!--            <el-upload v-model:file-list="fileList2" class="upload-demo" :headers="headerObj" :limit='1'-->
            <!--                       :on-preview="handlePreview" :on-remove="handleRemove" action="/api/common/upload"-->
            <!--                       :on-success="successUpdata" list-type="picture">-->
            <!--              <el-button type="primary">点击上传图片</el-button>-->
            <!--            </el-upload>-->
            <el-upload
                class="avatar-uploader"
                :headers="headerObj"
                action="/api/common/upload"
                :show-file-list="false"
                :on-success="successUpdata"
                list-type="picture"
            >
              <img v-if="form.image" alt="avatar" :src="form.image" class="avatar"/>
              <el-icon v-else class="avatar-uploader-icon">
                <Plus/>
              </el-icon>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-space>
          <el-button type="info" plain :loading="loading" @click="cancelHandle">取消</el-button>
          <el-button type="primary" :loading="loading" @click="confirmHandle">提交保存</el-button>
        </el-space>
      </template>
    </el-drawer>
  </div>
</template>
<script setup>
import {reactive, ref, computed, watch} from "vue"
import {editAccount} from "@/api/supplier.js"
import {toast} from "@/hook/toast";
import {delay} from "@/utils";
import store from '@/store'
import {getBusinessId} from "@/api/business";
import {Plus} from "@element-plus/icons-vue";

const formRef = ref(null)
const emits = defineEmits(['update:modelValue', 'addSuccess'])
const form = reactive({
  name: '',
  jiekuanzhanghu_id: '',
  zhanghu_content: '',
  image: '',
})
const formLabelWidth = '80px'
const loading = ref(false);
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true,
  }
})
const visible = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    console.log(value, '属性')
    emits('update:modelValue', value)
  }
})


const headerObj = ref({})
const {token} = store.getters
headerObj.value.token = token;

// 关闭组件
function closed() {
  resetForm()
}

// 添加图片
const fileList2 = ref([])

function handlePreview(w) {
  console.log(w, '23')
}

const array = ref([])

// 上传图片
function successUpdata(e) {
  form.image = e.data.fullurl
}

// 删除图片
function handleRemove(file) {
  form.image = ''
}

const closeHandle = () => {
  visible.value = false
};
const cancelHandle = () => {
  visible.value = false
}

function editHandle(row) {
  visible.value = true
  const {id, image, name, zhanghu_content} = row
  form.name = name
  form.zhanghu_content = zhanghu_content
  form.jiekuanzhanghu_id = id
  form.image = image
  // if (image) {
  //   fileList2.value = [{
  //     status: 'success',
  //     response: {data: {fullurl: image}},
  //     name: '1.png',
  //     url: image
  //   }]
  // }
}

const userList = ref([])
watch(() => props.modelValue, value => {
  if (!value) {
    return
  }
  // initUserList()
})

async function initUserList() {
  const resp = await getBusinessId()
  const {code, data, msg} = resp
  if (code !== 1) return
  if (!!data && data.length) {
    userList.value = data.map(item => {
      const {id, name} = item
      return {value: id, label: name}
    })
  }
}

// 编辑
defineExpose({
  editHandle,
})

// 提交保存
function confirmHandle() {
  formRef.value.validate(async flag => {
    if (!flag) return
    loading.value = true
    const {name, jiekuanzhanghu_id, zhanghu_content, image} = form
    const payload = {
      name, jiekuanzhanghu_id, zhanghu_content,image
    }
    // payload.image = fileList2.value.filter(item => item.status === 'success').map(item => item.response.data.fullurl).join(',')
    const resp = await editAccount(payload)
    console.log(resp, '返回的数据');
    const {code, msg} = resp
    await delay(200)
    toast({title: msg})
    loading.value = false
    if (code !== 1) return
    triggerUpdate()
  })
}

// 清空数组 并关闭
function resetForm() {
  form.gongyingshang_id = ''
  form.mobile = ''
  form.name = ''
  form.wx = ''
  formRef.value.resetFields()
}

function triggerUpdate() {
  emits('addSuccess')
  resetForm()
  visible.value = false
}

</script>
<style lang="scss" scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style lang="scss" >
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
